<template>
  <el-row>
    <el-form size="big" :inline="true">
      <el-form-item label="姓名">
        <el-input v-model="customerName" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="big" @click="queryList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>

  <!-- 分割线 -->
  <div class="common-layout">
    <el-container>
      <el-aside class="customerInfo">
        <CustomerInfo :customerName="customerName" ref="left" />
      </el-aside>

      <div class="spacer"></div>

      <el-aside class="service">
        <ServiceInfo :customerName="customerName" ref="right" />
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomerInfo from "./CustomerInfo.vue";
import ServiceInfo from "./ServiceInfo.vue";

let left = ref(null);
let right = ref(null);

const customerName = ref("");
// const queryParams = ref({
//   customerName: "",
// });

function queryList() {
  // console.log("查询方法被调用了");
  // console.log(queryParams.value.customerName);
  left.value.customerList();
  // console.log("左侧被调用了");
  right.value.queryList();
}
</script>

<style scoped>
.common-layout {
  margin-top: 20px;
}

/* 客户信息 */
.customerInfo {
  width: 460px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  padding: 0;
  border-radius: 5px;
}

/* 外出登记 */
.service {
  width: 510px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  border-radius: 5px;
}

/* 间距 */
.spacer {
  width: 20px; /* 或者你希望的间距大小 */
}
</style>
